<template>
  <div class="navbar_wra">
    <ul>
      <li>
        <i class="icon">帮助</i>
      </li>
      <li>
        <i class="icon">搜索</i>
      </li>
      <li>
        <a class="btn">选择车俩</a>
      </li>
      <li>
        <i class="icon">搜索</i>
      </li>
      <li @click="toUser">
        <i class="icon">个人</i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    toUser() {
      if (this.$route.path === "/user") return;
      this.$router.push("/user");
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar_wra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 86px;
  z-index: 9;
  text-align: center;
  li {
    display: inline-block;
  }
  .icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    line-height: 44px;
    margin: 17px;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    background-color: #383d44;
  }
  .btn {
    display: block;
    width: 240px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    margin: 17px;
    font-size: 26px;
    border-radius: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #383d44;
  }
}
</style>